<template>
  <el-page-header :icon="ArrowLeft" title="返回" @back="backClick" class="setting-page-header">
    <template #content>
      <span class="text-large font-600 mr-3"> 设置 </span>
    </template>
  </el-page-header>
  <el-card align="center" class="setting-page-layout">
    <el-tabs v-model="activeName" class="setting-tabs" tab-position="left" @tab-click="handleClick">
      <el-tab-pane label="开发工具配置" name="first">
        <SetTools></SetTools>
      </el-tab-pane>
      <el-tab-pane label="项目管理配置" name="second">
        <SetPath></SetPath>
      </el-tab-pane>
      <el-tab-pane label="项目标签配置" name="third">
        <SetTag></SetTag>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SetTools from './setTools/setTools.vue'
import SetPath from './setPath/setPath.vue'
import SetTag from './setTag/setTag.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";

const activeName = ref('first')
const mRouter = useRouter()

const handleClick = (tab, event: Event) => {
  console.log(tab, event)
}
const backClick = () => {
  mRouter.push("/home")
}
</script>

<style scoped lang="less">
.setting-page-header {
  margin-left: 30px;
  margin-top: 50px;
}

.setting-page-layout {
  margin: 15px;

  .setting-tabs {
    min-height: 50vh;
  }
}
</style>
